<!DOCTYPE html>
<html lang="">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>注册 - webIM</title>
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../css/login.css">
  <link rel="stylesheet" type="text/css" href="../css/admin.css">
</head>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
  <div class="layadmin-user-login-main">
    <div class="layadmin-user-login-box layadmin-user-login-header">
      <h2>LayIM 即时通讯系统</h2>
    </div>
    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-email" for="LAY-user-login-email"></label>
        <input type="text" name="email" id="LAY-user-login-email" lay-verify="email" placeholder="邮箱" class="layui-input">
      </div>
      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="验证码" class="layui-input">
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 10px;">
              <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" lay-active="getVercode" id="getVercode">获取验证码</button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
        <input type="password" name="password" id="LAY-user-login-password" lay-verify="pass" placeholder="密码" class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label>
        <input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required" placeholder="确认密码" class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label>
        <input type="text" name="nickname" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="昵称" class="layui-input">
      </div>
      <div class="layui-form-item">
        <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议" checked>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button>
      </div>
      <div class="layui-form-item layadmin-user-jump-change">
        <label>已有账号 ？</label>
        <a th:href="@{/user/login}" class="layadmin-link">返回登录</a>
      </div>
    </div>
  </div>

</div>

<script src="../layui/layui.js"></script>
<script>
  layui.use(['layer', 'form', 'jquery', 'util'], function() {
    //layui组件
    const layer = layui.layer
            , $ = layui.jquery
            , form = layui.form
            , util = layui.util;

    let wait = 60;

    function time(o) {
      if (wait === 0) {
        $('#getVercode')
                .removeClass("layui-btn-disabled")
                .attr("disabled",false);
        o.innerHTML = "获取验证码";
        wait = 60;
      } else {
        $('#getVercode')
                .addClass("layui-btn-disabled")
                .attr("disabled",true);
        o.innerHTML = wait+"秒后重获";
        wait--;
        setTimeout(function () {
          time(o);
        }, 1000);
      }
    }

    util.event('lay-active', {
      'getVercode': function() {
        const email = $.trim($("#LAY-user-login-email").val());
        const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (reg.test(email)) {
          $.ajax({
            url:"/user/"+email,
            type:"POST",
            success:function(data) {
              if(data.code === 200){
                time(document.getElementById('getVercode'))
                layer.msg("验证码已发送至你的邮箱，请注意查收", {
                  icon: 1, time: 1000
                });
              }else {
                layer.msg("发送失败", {
                  icon: 2, time: 1000
                });
              }
            },
            error:function() {
              layer.msg("服务器错误,请稍后再试！",{
                icon: 2, time: 1000
              });
            }
          });
        } else {
          layer.msg("请输入正确的邮箱");
        }
      }
    });
    form.on('submit(LAY-user-reg-submit)', function(obj){
      const field = obj.field;

      //确认密码
      if(field.password !== field.repass){
        return layer.msg('两次密码输入不一致');
      }

      //是否同意用户协议
      if(!field.agreement){
        return layer.msg('你必须同意用户协议才能注册');
      }

      //请求接口
      $.ajax({
        url:"/user/new",
        data:field,
        type:"POST",
        dataType:"json",
        success:function(data) {
          if(data.code === 200){
            layer.msg(data.msg, {
              offset: '15px'
              ,icon: 1
              ,time: 1000
            }, function(){
              location.href = '/user/login';
            });
          }else {
            layer.msg(data.msg, {
              icon: 2, time: 1000
            });
          }
        },
        error:function() {
          layer.msg("服务器错误,请稍后再试！",{
            icon: 2, time: 1000
          });
        }
      });
    });
  });
</script>
</body>
</html>